<template>
  <baidu-map
    class="map"
    center="常州市"
    :scroll-wheel-zoom="true"
    :zoom='10'
  >
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
    <bm-geolocation
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :showAddressBar="true"
      :autoLocation="true"
    ></bm-geolocation>
    <bml-marker-clusterer :averageCenter="true">
      <bm-marker
        v-for="(marker,index) of markers"
        :key="index"
        :position="{lng: marker.lng, lat: marker.lat}"
        @click='goCheck'
        :icon="{url: marker.icon , size: {width: 32, height: 32}}"
      >
        <bm-label
          :content="marker.info"
          :offset="{width: -50, height: 30}"
        />
      </bm-marker>
    </bml-marker-clusterer>

    <!-- <bm-marker
      v-for="(marker,index) of markers"
      :key="index"
      :position="{lng: marker.lng, lat: marker.lat}"
      @click='goInfo'
      :icon="{url: marker.icon , size: {width: 32, height: 32}}"
    >
      <bm-label
        :content="marker.info"
        :labelStyle="{color: marker.color , fontSize : '14px'}"
        :offset="{width: -38, height: 30}"
      />
    </bm-marker> -->
  </baidu-map>

</template>

<script>
import { BmlMarkerClusterer } from "vue-baidu-map";
import { getPosition } from "@/api/map";

export default {
  name: "Map",
  data() {
    return {
      markers: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      getPosition().then(res => {
        this.markers = [];
        res.data.map(item => {
          const mapData = {};
          mapData.lng = item.lng;
          mapData.lat = item.lat;
          mapData.info = item.lng + "," + item.lat;
          mapData.deviceInfoId = item.deviceInfoId;
          mapData.color = "green";
          mapData.icon = "http://liangzhun.billyzc.com/img/green.png";
          this.markers.push(mapData);
        });
      });
    },
    goCheck(e) {
      let positionX = e.target.LA.lng;
      let deviceInfo = this.markers.find(item => {
        return item.lng == positionX;
      });

      this.$router.push({
        path: "/equipmentDetails/index",
        query: { deviceInfoId: deviceInfo.deviceInfoId }
      });
    }
  },
  components: {
    BmlMarkerClusterer
  }
};
</script>

<style lang='scss' scoped>
/* 百度地图必须设置宽高 */
.map {
  width: 100%;
  height: 600px;
}
</style>
